<template>
  <div class="config-home">
    <div class="summarize">
      <div class="search">
        <el-input
          v-model="searchKey"
          placeholder="搜索图层"
          :suffix-icon="Search"
        />
        <img
          :src="icons.inputAddIcon"
          class="input-add"
          @click="showLayerParent(false)"
        >
      </div>
      <el-scrollbar
        style="height: 100%; padding-right: 8px; padding-bottom: 10px"
        wrap-style="overflow-x:hidden;"
      >
        <div v-for="item in layerData" :key="item.id">
          <div class="item-parent">
            <div
              class="item_title"
              :class="item.showItem ? 'selected' : 'unselected'"
              style="cursor: pointer; user-select: none"
            >
              <div class="item-label" />
              <div
                class="name"
                v-text="item.name"
              />
              <div class="space" />
              <div class="mask" @click="item.showItem = !item.showItem" />
              <img
                :src="icons.addIcon"
                class="icon add"
                @click="selectParentLayer(item)"
              >
              <img
                :src="icons.editIcon"
                class="icon edit"
                @click="showLayerParent(true, item)"
              >
              <img
                :src="icons.delIcon"
                class="icon delete"
                @click="deleteLayer(item)"
              >
              <img
                :src="icons.caretTopIcon"
                :class="item.showItem ? 'item-caret-up' : 'item-caret-down'"
                class="icon"
                @click="item.showItem = !item.showItem"
              >
            </div>
            <el-collapse-transition>
              <div v-if="item.showItem && item.children && item.children.length > 0">
                <div
                  class="sub-item"
                  :class="subItem.layerChildShow ? 'sub-item-selected' : 'sub-item-normal'"
                  v-for="subItem in item.children"
                  :key="subItem.id"
                  @mouseover="subItem.layerEditShow = true"
                  @mouseleave="subItem.layerEditShow = false"
                >
                  <div class="sub-item-label" />
                  <div class="sub-item-name" v-text="subItem.name" />
                  <div class="item-spaceDiv" />
                  <img
                    :src="icons.delIcon"
                    class="delete"
                    @click="deleteChildLayer(item,subItem)"
                    v-if="subItem.layerEditShow"
                  >
                  <img
                    :src="icons.editIcon"
                    class="edit"
                    @click="editChildLayer(subItem, item.id)"
                    v-if="subItem.layerEditShow"
                  >
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <el-form ref="ruleFormRef" class="form" :rules="rules" :model="form">
      <!--图层大类登记-->
      <div class="operation" v-if="layerParentShow">
        <div class="title">图层大类登记</div>
        <div class="divider" />
        <div class="sub-title">图层大类名称</div>
        <el-form-item
          style="width: 300px; margin-top: 8px"
          prop="elementName"
          :rules="[
            { required: true, message: '请输入图层名称', trigger: 'blur' },
          ]"
        >
          <el-input v-model="form.elementName" placeholder="请输入内容" />
        </el-form-item>
        <div class="sub-title">图层大类描述</div>
        <div style="margin-top: 8px">
          <el-input
            v-model="form.description"
            :rows="3"
            type="textarea"
            placeholder="请输入内容"
          />
        </div>
        <div class="register" v-if="form.createUser">
          <div class="child">
            登记人
            <el-input
              v-model="form.createUser"
              disabled
              placeholder="请输入内容"
              style="margin-top: 8px"
            />
          </div>
          <div class="child">
            登记人机构
            <el-input
              v-model="form.createDept"
              disabled
              placeholder="请输入内容"
              style="margin-top: 8px"
            />
          </div>
          <div class="child">
            登记人时间
            <el-input
              v-model="form.createTime"
              disabled
              placeholder="请输入内容"
              style="margin-top: 8px"
            />
          </div>
        </div>
        <div class="commit">
          <div class="cancel" @click="layerParentCancel">取消</div>
          <div class="confirm" @click="layerParentSave">保存</div>
        </div>
      </div>
      <!--图层小类登记-->
      <div
        class="operation"
        v-if="
          (layerChildSelected && layerChildSelected.layerChildShow) ||
            (layerParentSelected && layerParentSelected.layerAddShow)
        "
      >
        <el-scrollbar
          style="width: 100%; height: 100%; padding-right: 8px"
          wrap-style="overflow-x:hidden;"
        >
          <div class="title">图层小类登记</div>
          <div class="divider" />
          <div class="sub-title-child">
            <div class="presuffix" />
            基本信息配置
          </div>
          <div class="sub-title">图层名称</div>
          <el-form-item
            style="margin-top: 8px; display: flex"
            prop="elementName"
            :rules="[
              { required: true, message: '请输入图层名称', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="form.elementName"
              placeholder="请输入内容"
              style="width: 300px; margin-right: 20px"
            />
            <el-switch
              v-model="form.enable"
              :active-value="0"
              :inactive-value="1"
              class="switch"
            />
          </el-form-item>
          <div class="sub-title">图层小类描述</div>
          <div style="margin-top: 8px">
            <el-input
              v-model="form.description"
              :rows="3"
              type="textarea"
              placeholder="请输入内容"
            />
          </div>
          <!--权限分配-->
          <div class="permission">
            <div class="item">
              数据权限控制：
              <el-radio-group v-model="form.dataScopeType" fill="#409EFF">
                <el-radio :label="0" size="large">全部可见</el-radio>
                <el-radio :label="1" size="large">行政区划控制</el-radio>
                <el-radio :label="2" size="large">组织机构控制</el-radio>
              </el-radio-group>
            </div>
            <div class="item">
              门户菜单权限控制：
              <el-radio-group v-model="form.menuScopeType" fill="#409EFF">
                <el-radio :label="0" size="large">是</el-radio>
                <el-radio :label="1" size="large">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="sub-title-child" style="margin-top: 20px">
            <div class="presuffix" />
            数据信息配置
          </div>
          <div class="child">
            图层类型
            <el-input
              v-model="form.elementType"
              placeholder="请输入内容"
              style="margin-top: 8px"
            />
          </div>
          <div class="register" style="margin-top: 12px">
            <div class="child">
              后端接口名称
              <el-input
                v-model="form.apiDO.name"
                placeholder="请输入内容"
                style="margin-top: 8px"
              />
            </div>
            <div class="child">
              后端接口地址
              <el-input
                v-model="form.apiDO.url"
                placeholder="请输入内容"
                style="margin-top: 8px"
              />
            </div>
          </div>
          <div class="sub-title">特殊数据控制（入参数）</div>
          <table class="params">
            <tr class="type">
              <th style="width: 50px">序号</th>
              <th style="width: 220px">入参字段</th>
              <th style="width: 220px">类型</th>
              <th>关联配置</th>
              <th style="width: 160px">操作</th>
            </tr>
            <tr
              class="content"
              v-for="(paramsItem, paramsIndex) in apiInListTemp"
              v-show="!paramsItem.deleted || paramsItem.deleted === 0"
              :key="paramsIndex"
            >

              <td>{{ paramsIndex + 1 }}</td>
              <td>
                <el-input
                  v-model="paramsItem.field"
                  placeholder="请输入"
                  class="input-key"
                />
              </td>
              <td>
                <el-select
                  v-model="paramsItem.fieldType"
                  placeholder="请选择"
                  class="input-key"
                  :teleported="false"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.lable"
                    :value="item.value"
                  />
                </el-select>
              </td>
              <td>
                <!--固定值-->
                <div class="associate" v-if="paramsItem.fieldType === '0'">
                  <el-input
                    v-model="paramsItem.fixedValue"
                    placeholder="请输入"
                    class="input-time"
                  />
                </div>
                <!--时效性-->
                <div class="associate" v-if="paramsItem.fieldType === '1'">
                  <el-radio-group v-model="paramsItem.timeType" fill="#409EFF">
                    <el-radio label="0" size="large">
                      <div style="display: flex">
                        近
                        <el-input
                          v-model="paramsItem.hour"
                          placeholder="请输入"
                          class="input-time"
                          :disabled="paramsItem.timeType !== 0"
                          oninput="value=value.replace(/[^0-9.]/g,'')"
                        />
                        小时
                      </div>
                    </el-radio>
                    <el-radio label="1" size="large">
                      <div style="display: flex">
                        近
                        <el-input
                          v-model="paramsItem.day"
                          placeholder="请输入"
                          class="input-time"
                          :disabled="paramsItem.timeType !== 1"
                          oninput="value=value.replace(/[^0-9.]/g,'')"
                        />
                        天
                      </div>
                    </el-radio>
                    <el-radio label="2" size="large">
                      <div
                        style="display: flex; height: 30px; align-items: center"
                      >
                        固定时间
                        <el-date-picker
                          v-model="paramsItem.fixedTime"
                          type="datetime"
                          placeholder="请选择"
                          style="margin-left: 10px"
                          :teleported="false"
                          :disabled="paramsItem.timeType !== '2'"
                        />
                      </div>
                    </el-radio>
                    <el-radio :label="3" size="large">
                      <div
                        style="display: flex; height: 30px; align-items: center"
                      >
                        接口时间
                      </div>
                    </el-radio>
                  </el-radio-group>
                </div>
                <!--引用值-->
                <div class="quote" v-if="paramsItem.fieldType === '2'">
                  <el-radio-group v-model="paramsItem.subType" fill="#409EFF">
                    <el-radio label="0" size="large">组织机构</el-radio>
                    <el-radio label="1" size="large">行政区划</el-radio>
                  </el-radio-group>
                </div>
              </td>
              <td>
                <div style="display: flex; justify-content: center">
                  <img
                    :src="icons.paramsAddIcon"
                    class="operate-icon"
                    @click="addParams"
                  >
                  <img
                    :src="icons.reduceIcon"
                    class="operate-icon"
                    @click="reduceParams(paramsIndex)"
                  >
                </div>
              </td>
            </tr>
          </table>
          <div class="sub-title">展示参数</div>
          <table class="params">
            <tr class="type">
              <th style="width: 56px">序号</th>
              <th style="width: 220px">出参数字段名</th>
              <th style="width: 220px">页面字段名称</th>
              <th style="width: 220px">字段类型</th>
              <th>关联配置</th>
              <th>是否启用</th>
              <th style="width: 160px">操作</th>
            </tr>
            <tr
              class="content"
              v-for="(paramsItem, paramsIndex) in form.apiOutList"
              v-show="!paramsItem.deleted ||paramsItem.deleted === 0"
              :key="paramsIndex"
            >
              <td>{{ paramsIndex + 1 }}</td>
              <td>
                <el-input
                  v-model="paramsItem.fieldEn"
                  placeholder="请输入"
                  class="input-key"
                />
              </td>
              <td>
                <el-input
                  v-model="paramsItem.fieldCh"
                  placeholder="请输入"
                  class="input-key"
                />
              </td>
              <td>
                <el-select
                  v-model="paramsItem.fieldType"
                  placeholder="请选择"
                  class="input-key"
                  :teleported="false"
                >
                  <el-option
                    v-for="item in keyType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </td>
              <td>
                <div class="associate">
                  <div class="option">
                    <img
                      :src="
                        paramsItem.isQuery === '1' ? checkedIcon : uncheckedIcon
                      "
                      class="check"
                      @click="paramsItem.isQuery === '1'? paramsItem.isQuery ='0' : paramsItem.isQuery ='1'"
                    >
                    检索
                  </div>
                  <div class="option">
                    <img
                      :src="
                        paramsItem.isDetailTitle === '1'
                          ? checkedIcon
                          : uncheckedIcon
                      "
                      class="check"
                      @click="paramsItem.isDetailTitle === '1'? paramsItem.isDetailTitle ='0' : paramsItem.isDetailTitle ='1'"
                    >
                    详情窗口名称
                  </div>
                  <div class="option">
                    <img
                      :src="
                        paramsItem.isList === '1' ? checkedIcon : uncheckedIcon
                      "
                      class="check"
                      @click="paramsItem.isList === '1'? paramsItem.isList ='0' : paramsItem.isList ='1'"
                    >
                    列表展示
                  </div>
                  <div class="option">
                    <img
                      :src="
                        paramsItem.isDetail === '1' ? checkedIcon : uncheckedIcon
                      "
                      class="check"
                      @click="paramsItem.isDetail === '1'? paramsItem.isDetail ='0' : paramsItem.isDetail ='1'"
                    >
                    详情展示
                  </div>
                </div>
              </td>
              <td>
                <el-switch
                  v-model="paramsItem.enabled"
                  :active-value="0"
                  :inactive-value="1"
                  class="switch"
                />
              </td>
              <td>
                <div style="display: flex; justify-content: center">
                  <img
                    :src="icons.paramsAddIcon"
                    class="operate-icon"
                    @click="addExportParams"
                  >
                  <img
                    :src="icons.reduceIcon"
                    class="operate-icon"
                    @click="reduceExportParams(paramsIndex)"
                  >
                  <img
                    :src="icons.upIcon"
                    class="operate-icon"
                    @click="up(paramsIndex)"
                    v-if="paramsIndex !== startIndex"
                  >
                  <img
                    :src="icons.downloadIcon"
                    class="operate-icon"
                    @click="down(paramsIndex)"
                    v-if="isShowDown(paramsIndex) "
                  >
                </div>
              </td>
            </tr>
          </table>
          <div class="sub-title-child" style="margin-top: 20px">
            <div class="presuffix" />
            详情效果配置
          </div>
          <div class="permission">
            <div class="item">
              详情展示类型：
              <el-radio-group v-model="form.detailType" fill="#409EFF">
                <el-radio :label="0" size="large">点位弹窗</el-radio>
                <el-radio :label="1" size="large">中心弹窗</el-radio>
              </el-radio-group>
            </div>
            <div class="child">
              固定弹窗名称
              <el-input
                v-model="form.detailTitle"
                placeholder="请输入内容"
                style="margin-top: 8px"
              />
            </div>
          </div>
          <div class="sub-title-child" style="margin-top: 20px">
            <div class="presuffix" />
            图层可视化效果配置
          </div>
          <div class="enable-container">
            点位默认配置:
            <el-switch
              v-model="form.pointDO.enabled"
              :active-value="0"
              :inactive-value="1"
              class="switch"
              style="margin-left: 10px"
            />
          </div>
          <div class="upload" v-if="form.pointDO.enabled === 0">
            图标
            <img
              :src="imgFile.url"
              style="width: 64px; height: 64px; margin: 10px 0"
              v-if="imgFile.url"
            >
            <div class="pit">
              <div class="pit-text">
                <div class="img-name">{{ imgFile.name }}</div>
                <img :src="icons.cancelUploadIcon" class="cancel-upload" v-if="imgFile.url" @click="cancelUploadImg">
              </div>
              <el-upload
                action="http://192.168.240.182:8160/identification/api/upload/file"
                method="POST"
                :headers="headers"
                :show-file-list="false"
                :on-change="fileChange"
                :on-success="uploadSuccess"
                accept=".jpg,.png,.jfif,.svg,.webp"
              >
                <div class="pit-icon">
                  <el-icon color="#000">
                    <Upload />
                  </el-icon>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="enable-container">
            聚合默认配置：
            <el-switch
              v-model="form.collectDO.enabled"
              :active-value="0"
              :inactive-value="1"
              class="switch"
            />
          </div>
          <div class="gather" style="margin-top: 12px" v-if="form.collectDO.enabled === 0">
            <div class="child">
              聚合样式
              <el-select
                v-model="form.collectDO.content.collectStyle"
                placeholder="请选择"
                class="input-key"
                style="margin-top: 10px"
                :teleported="false"
              >
                <el-option
                  v-for="item in collectStyleOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </div>
            <div class="child" v-if="form.collectDO.content.collectStyle === '气泡聚合'">
              气泡聚合颜色
              <el-input
                v-model="form.collectDO.content.color"
                placeholder="请输入色值"
                style="margin-top: 8px"
              />
            </div>
            <div class="child">
              聚合范围
              <el-input
                v-model="form.collectDO.content.collectRange"
                placeholder="请输入像素"
                style="margin-top: 8px"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              />
            </div>
            <div class="child">
              聚合标签位置
              <el-select
                v-model="form.collectDO.content.collectLabelPosition"
                placeholder="请选择"
                class="input-key"
                style="margin-top: 10px"
                :teleported="false"
              >
                <el-option
                  v-for="item in collectLabelPositionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="enable-container">
            热力默认配置：
            <el-switch
              v-model="form.heatmapDO.enabled"
              :active-value="0"
              :inactive-value="1"
              class="switch"
            />
          </div>
          <div class="gather" style="margin-top: 12px" v-if="form.heatmapDO.enabled === 0">
            <div class="child">
              热力依据字段
              <el-select
                v-model="form.heatmapDO.config.heatAccordance"
                placeholder="请选择"
                class="input-key"
                style="margin-top: 10px"
                :teleported="false"
              >
                <el-option
                  v-for="item in form.apiOutList"
                  :key="item.fieldEn"
                  :label="item.fieldCh"
                  :value="item.fieldEn"
                />
              </el-select>
            </div>
            <div class="child-group">
              是否支持时间轴播放
              <el-radio-group
                v-model="form.heatmapDO.config.isSupportTimeLine"
                fill="#409EFF"
              >
                <el-radio :label="true" size="large">是</el-radio>
                <el-radio :label="false" size="large">否</el-radio>
              </el-radio-group>
            </div>
            <div class="child">
              时间依据字段
              <el-select
                v-model="form.heatmapDO.config.timeAccordance"
                placeholder="请选择"
                class="input-key"
                style="margin-top: 10px"
                :teleported="false"
              >
                <el-option
                  v-for="item in timeAccordanceOptions"
                  :key="item.fieldEn"
                  :label="item.fieldCh"
                  :value="item.fieldEn"
                />
              </el-select>
            </div>
            <div class="child">
              柱状图统计依据字段
              <el-select
                v-model="form.heatmapDO.config.statisticAccordance"
                placeholder="请选择"
                class="input-key"
                style="margin-top: 10px"
                :teleported="false"
              >
                <el-option
                  v-for="item in statisticAccordanceOptions"
                  :key="item.fieldEn"
                  :label="item.fieldCh"
                  :value="item.fieldEn"
                />
              </el-select>
            </div>
            <div class="child">
              <div class="select">
                颜色
                <el-icon class="more" @click="showColorList = !showColorList">
                  <MoreFilled />
                </el-icon>
              </div>

              <div class="select-color" @click="showColorList = !showColorList">
                <div
                  class="color-item"
                  v-for="(colorItem, index) in form.heatmapDO.config.color"
                  :style="{ background: colorItem }"
                  :key="index"
                />
              </div>
              <el-scrollbar style="height: 158px" v-if="showColorList">
                <div
                  class="color-list"
                  v-for="(parentColorItem, parentIndex) in colorData"
                  :key="parentIndex"
                >
                  <div class="list-item">
                    <div
                      class="color-item"
                      v-for="(colorItem, index) in parentColorItem"
                      :style="{ background: colorItem }"
                      :key="index"
                      @click="selectColor(parentColorItem)"
                    />
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
          <div class="sub-title">默认展示效果</div>
          <el-radio-group v-model="form.showType" fill="#409EFF">
            <el-radio :label="0" size="large">点位</el-radio>
            <el-radio :label="1" size="large">热力</el-radio>
            <el-radio :label="2" size="large">聚合</el-radio>
          </el-radio-group>
          <div class="register" v-if="form.createUser">
            <div class="child">
              登记人
              <el-input
                v-model="form.createUser"
                disabled
                placeholder="请输入内容"
                style="margin-top: 8px"
              />
            </div>
            <div class="child">
              登记人机构
              <el-input
                v-model="form.createDept"
                disabled
                placeholder="请输入内容"
                style="margin-top: 8px"
              />
            </div>
            <div class="child">
              登记人时间
              <el-input
                v-model="form.createTime"
                disabled
                placeholder="请输入内容"
                style="margin-top: 8px"
              />
            </div>
          </div>
          <div class="commit">
            <div class="cancel" @click="layerParentCancel">取消</div>
            <div class="confirm" @click="layerParentSave">保存</div>
          </div>
        </el-scrollbar>
      </div>
    </el-form>
    <el-dialog v-model="dialogShow" width="30%" :show-close="false">
      <div class="dialog">
        <div class="title">
          确认提示
          <el-icon style="margin-left:auto;margin-right: 20px;cursor: pointer;" @click="dialogShow = !dialogShow"><CloseBold /></el-icon>
        </div>
        <div class="content">
          <img :src="icons.configDialog">
          <div class="right">
            是否确定删除任务
            <div class="sub-content">{{ deleteTargetItem.children && deleteTargetItem.children.length>0 ? '该图层大类下含有图层小类，如果仍进行删除，则图层小类将一并删除，是否继续' : '是否确定删除' }}</div>
          </div>
        </div>
        <div class="divider" />
        <div class="dialog-footer">
          <div class="confirm" @click="deleteConfirm(true)">确认</div>
          <div class="cancel" @click="deleteConfirm(false)">取消</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import addIcon from '@/assets/map/svg/add.svg'
import delIcon from '@/assets/map/svg/delete.svg'
import caretTopIcon from '@/assets/map/svg/arrow_down.svg'
import inputAddIcon from '@/assets/map/svg/input_add.svg'
import editIcon from '@/assets/map/svg/edit.svg'
import checkedIcon from '@/assets/map/svg/checked.svg'
import uncheckedIcon from '@/assets/map/svg/unchecked.svg'
import paramsAddIcon from '@/assets/map/svg/params_add.svg'
import reduceIcon from '@/assets/map/svg/reduce.svg'
import downloadIcon from '@/assets/map/svg/download.svg'
import cancelUploadIcon from '@/assets/map/svg/cancel_upload.svg'
import confirmUploadIcon from '@/assets/map/svg/confirm-upload.svg'
import moreIcon from '@/assets/map/svg/more.svg'
import upIcon from '@/assets/map/svg/up.svg'
import configDialog from '@/assets/map/config_dialog.png'
import { Search, Upload, MoreFilled, CloseBold } from '@element-plus/icons'
import { onMounted, reactive, ref, watch } from 'vue'
import {
  UploadFile,
  ElInput,
  ElScrollbar,
  ElCollapseTransition,
  ElRadioGroup,
  ElRadio,
  ElSelect,
  ElOption,
  ElSwitch,
  ElUpload,
  ElIcon,
  ElDatePicker,
  ElForm,
  ElFormItem,
  ElDialog,
  ElMessage
} from 'element-plus'
import {
  addLayer,
  deleteInfoById,
  queryAllLayer,
  queryInfoById,
  updateLayer
} from '@/api/mapConfig'
import { DealData, deepClone } from '@/utils/utils'
import { getToken } from '@/utils/auth'

const icons = ref({
  inputAddIcon: inputAddIcon,
  addIcon: addIcon,
  reduceIcon: reduceIcon,
  delIcon: delIcon,
  caretTopIcon: caretTopIcon,
  editIcon: editIcon,
  checkedIcon: checkedIcon,
  uncheckedIcon: uncheckedIcon,
  paramsAddIcon: paramsAddIcon,
  downloadIcon: downloadIcon,
  cancelUploadIcon: cancelUploadIcon,
  confirmUploadIcon: confirmUploadIcon,
  moreIcon: moreIcon,
  upIcon: upIcon,
  configDialog: configDialog
})
const headers = ref({
  Authorization: 'Bearer' + getToken()
})
// 图层数据
const layerData = ref([] as any)
// 所有图层的数据 主要用于搜索时使用
let originalLayerData = [] as any
// 搜索Key
const searchKey = ref('')
// 大类展示
const layerParentShow = ref(true)
// 选中父图层
const layerParentSelected = ref({} as any)
// 选中子图层
const layerChildSelected = ref({} as any)
// 特殊数据控制 类型列表
const typeOptions = ref([
  {
    lable: '固定值',
    value: '0'
  },
  {
    lable: '时效性',
    value: '1'
  },
  {
    lable: '引用值',
    value: '2'
  }
])
// 字段类型
const keyType = ref([
  {
    label: '文本',
    value: '0'
  },
  {
    label: '图片',
    value: '1'
  },
  {
    label: '链接',
    value: '2'
  },
  {
    label: '时间',
    value: '3'
  },
  {
    label: '视频播放器',
    value: '4'
  }
])
// 时间依据字段
const timeAccordanceOptions = ref([] as any)
// 柱状图统计依据字段
const statisticAccordanceOptions = ref([] as any)
// 聚合样式
const collectStyleOptions = ref(['图标聚合', '气泡聚合'])
// 聚合标签位置
const collectLabelPositionOptions = ref([
  {
    label: '居中',
    value: 'center-center'
  },
  {
    label: '下方',
    value: 'below-center'
  }
])
// 图片展示
const imgFile = ref({
  name: '请上传图片',
  url: '',
  file: [] as any
} as any)
const dialogShow = ref(false)
// 暂存要删除的图层
const deleteTargetItem = ref({} as any)
// 暂存父图层
const deleteParentItem = ref({} as any)
// 颜色选择
const colorData = ref([
  ['#009397', '#5dbabf', '#bae1e2', '#f8c0aa', '#dd7755', '#c22e00'],
  ['#223f9a', '#f15c17', '#ff991f', '#88572c', '#ddb27c', '#12939a'],
  ['#f9e200', '#e6470a', '#d31256', '#d31256', '#551ead', '#213e9a'],
  ['#ffffb2', '#fed976', '#feb24c', '#fd8d3c', '#f03b2c', '#bd0028'],
  ['#ffffcc', '#d9f0a3', '#addd8e', '#78c679', '#31a354', '#006837'],
  ['#252525', '#636363', '#969696', '#bdbdbd', '#d9d9d9', '#f7f7f7']
])
// 是否展示颜色列表
const showColorList = ref(false)

const apiInListTemp = ref([
  {
    field: ''
  }
] as any)

const form = ref({
  apiDO: {
    name: ''
  } as any,
  enable: 0,
  dataScopeType: 0,
  menuScopeType: 1,
  detailType: 0,
  showType: 0,
  pid: '',
  apiInList: [] as any,
  apiOutList: [
    {
      fieldCh: '',
      enabled: 0,
      fieldEn: '',
      deleted: 0
    }
  ] as any,
  pointDO: {
    enabled: 0
  } as any,
  collectDO: {
    content: {
      collectStyle: '气泡聚合',
      collectRange: 100,
      collectLabelPosition: 'below-center'
    } as any,
    enabled: 0
  } as any,
  heatmapDO: {
    config: {
      isSupportTimeLine: true,
      color: ['#00939c', '#5dbabf', '#bae1e2', '#f8c0aa', '#dd7755', '#c22e00'],
      heatAccordance: ''
    } as any,
    enabled: 0
  } as any
} as any)

const rules = reactive({
  layerName: [{ required: true, message: '请输入图层名称', trigger: 'blur' }]
})

const initLayerForm = () => {
  form.value = {
    apiDO: {} as any,
    enable: 0,
    dataScopeType: 0,
    menuScopeType: 1,
    detailType: 0,
    showType: 0,
    pid: '',
    apiInList: [] as any,
    apiOutList: [
      {
        fieldCh: '',
        fieldEn: '',
        enabled: 0,
        deleted: 0
      }
    ] as any,
    pointDO: {
      enabled: 0
    } as any,
    collectDO: {
      content: {
        collectStyle: '气泡聚合',
        collectRange: 100,
        collectLabelPosition: 'below-center'
      } as any,
      enabled: 0
    } as any,
    heatmapDO: {
      config: {
        isSupportTimeLine: true,
        color: [
          '#00939c',
          '#5dbabf',
          '#bae1e2',
          '#f8c0aa',
          '#dd7755',
          '#c22e00'
        ],
        heatAccordance: ''
      } as any,
      enabled: 0
    } as any
  } as any
  apiInListTemp.value = [
    {
      field: ''
    }
  ] as any
}
// 展示大类表单
const showLayerParent = (isEdit: boolean, parentItem?: any) => {
  form.value = {} as any
  initLayerForm()
  layerParentShow.value = true
  if (layerParentSelected.value) {
    layerParentSelected.value.layerAddShow = false
    layerParentSelected.value = {} as any
  }
  if (layerChildSelected.value) {
    layerChildSelected.value.layerChildShow = false
    layerChildSelected.value = {} as any
  }
  // 如果存在item,则为编辑状态
  if (isEdit) {
    chooseChildItem.value = parentItem
    getDetailInfo(parentItem.id)
  }
}
// 删除父级图层需要弹窗确认
const deleteLayer = async (item: any) => {
  dialogShow.value = true
  deleteTargetItem.value = item
}
const deleteConfirm = async (isDelete: boolean) => {
  if (isDelete) {
    if (deleteParentItem.value.id) {
      deleteParentItem.value.children = deleteParentItem.value.children.filter((element: any) => element.id !== deleteTargetItem.value.id)
    } else {
      layerData.value = layerData.value.filter((element:any) => element.id !== deleteTargetItem.value.id)
    }
    await deleteInfoById(deleteTargetItem.value.id)
    // getAllLayerData()
  }
  dialogShow.value = false
  deleteTargetItem.value = {} as any
}
// 删除子级图层 直接删除
const deleteChildLayer = async (parentItem:any, item: any) => {
  dialogShow.value = true
  deleteTargetItem.value = item
  deleteParentItem.value = parentItem
  // parentItem.children = parentItem.children.filter((element: any) => element.id !== item.id)
  // await deleteInfoById(item.id)
}
// 大类表单上传
const layerParentSave = async () => {
  if (!form.value.elementName) return
  fillApiInData()
  form.value.collectDO.content = JSON.stringify(form.value.collectDO.content)
  form.value.heatmapDO.config = JSON.stringify(form.value.heatmapDO.config)

  try {
    if (form.value.id) {
      await updateLayer(form.value)
      if (chooseChildItem.value) chooseChildItem.value.name = form.value.elementName
    } else {
      await addLayer(form.value)
      getAllLayerData()
    }
    ElMessage({
      message: '保存成功',
      type: 'success'
    })
  } catch (e) {

  }
  form.value.collectDO.content = JSON.parse(form.value.collectDO.content)
  form.value.heatmapDO.config = JSON.parse(form.value.heatmapDO.config)

  // initLayerForm()
}
// 处理入参数据
const fillApiInData = () => {
  apiInListTemp.value.forEach((item: any, index:any) => {
    let keyType = '-1'
    let value = ''
    // 固定值
    if (item.fieldType === '0') {
      value = item.fixedValue
    } else if (item.fieldType === '1') {
      keyType = item.timeType
      // 时效性
      if (keyType === '0') {
        // 小时
        value = item.hour
      } else if (keyType === '1') {
        // 天
        value = item.day
      } else if (keyType === '2') {
        // 具体时间
        value = item.fixedTime
      }
    } else if (item.fieldType === '2') {
      keyType = String(item.subType)
    }
    // 如果 存在原来的数据 则只需要修改其中的部分数据
    if (form.value.apiInList) {
      if (form.value.apiInList[index]) {
        form.value.apiInList[index].field = item.field
        form.value.apiInList[index].fieldType = item.fieldType
        form.value.apiInList[index].param1 = keyType
        form.value.apiInList[index].param2 = value
      } else {
        form.value.apiInList.push({
          field: item.field,
          fieldType: item.fieldType,
          param1: keyType,
          param2: value
        })
      }
    }
  })
}
// 大类表单取消
const layerParentCancel = () => {
  form.value = {} as any
  layerParentShow.value = false
}
// 选中父图层
const selectParentLayer = (parentItem: any) => {
  initLayerForm()
  form.value.pid = parentItem.id
  parentItem.layerAddShow = true
  layerParentShow.value = false
  layerParentSelected.value = parentItem
  if (layerChildSelected.value) {
    layerChildSelected.value.layerChildShow = false
    layerChildSelected.value = {} as any
  }
}
// 记录一下当前显示的子图层
const chooseChildItem = ref({} as any)
// 选中子图层的编辑
const editChildLayer = (childItem: any, pid: any) => {
  if (childItem.layerChildShow) return
  form.value.pid = pid
  childItem.layerChildShow = true
  layerParentShow.value = false
  layerChildSelected.value = childItem
  if (layerParentSelected.value) {
    layerParentSelected.value.layerAddShow = false
    layerParentSelected.value = {} as any
  }
  if (chooseChildItem.value !== null) {
    chooseChildItem.value.layerChildShow = false
  }
  chooseChildItem.value = childItem
  getDetailInfo(childItem.id)
}
// 添加入参参数
const addParams = () => {
  apiInListTemp.value.push({
    field: ''
  })
}
// 删除入参参数
const reduceParams = (targetIndex: any) => {
  apiInListTemp.value[targetIndex].deleted = 1
  if (form.value.apiInList && form.value.apiInList[targetIndex]) {
    form.value.apiInList[targetIndex].deleted = 1
  }
  let isAllDelete = true
  apiInListTemp.value.forEach((element:any) => {
    if (!element.deleted || element.deleted !== 1) {
      isAllDelete = false
    }
  })
  if (isAllDelete) {
    addParams()
  }
}

// 出参添加操作
const addExportParams = () => {
  form.value.apiOutList.push({
    fieldCh: '',
    deleted: 0
  } as any)
}
// 删除出参数
const reduceExportParams = (targetIndex: any) => {
  form.value.apiOutList[targetIndex].deleted = 1
  let isAllDelete = true
  form.value.apiOutList.forEach((element:any) => {
    if (!element.deleted || element.deleted !== 1) {
      isAllDelete = false
    }
  })
  if (isAllDelete) {
    addExportParams()
  }
}
const isShowDown = (index:any) => {
  let isShow = false
  if (index + 1 < form.value.apiOutList.length) {
    for (let i = index + 1; i < form.value.apiOutList.length; i++) {
      if (form.value.apiOutList[i].deleted === 0) {
        isShow = true
        break
      }
    }
  } else {
    isShow = false
  }
  return isShow
}
// 下移操作
const down = (index: any) => {
  const temp = form.value.apiOutList[index]
  let changeIndex = index + 1
  do {
    if (changeIndex < form.value.apiOutList.length && form.value.apiOutList[changeIndex].deleted === 0) {
      break
    }
    changeIndex++
  } while (true)
  if (form.value.apiOutList[changeIndex]) {
    form.value.apiOutList[index] = form.value.apiOutList[changeIndex]
    form.value.apiOutList[changeIndex] = temp
  }
}
// 上移操作
const up = (index: any) => {
  const temp = form.value.apiOutList[index]
  let changeIndex = index - 1
  do {
    if (changeIndex < form.value.apiOutList.length && form.value.apiOutList[changeIndex].deleted === 0) {
      break
    }
    changeIndex--
  } while (true)
  if (form.value.apiOutList[changeIndex]) {
    form.value.apiOutList[index] = form.value.apiOutList[index - 1]
    form.value.apiOutList[index - 1] = temp
  }
}

const fileChange = (uploadFile: UploadFile) => {
  imgFile.value.url = URL.createObjectURL(uploadFile.raw as Blob | MediaSource)
  imgFile.value.name = uploadFile.name
  if (imgFile.value.url) {
    form.value.collectDO.content.collectStyle = '图片聚合'
  } else {
    form.value.collectDO.content.collectStyle = '气泡聚合'
  }
}

const uploadSuccess = (response:any) => {
  form.value.pointDO.icon = response
}

// 取消或确认上传
const cancelUploadImg = () => {
  imgFile.value.name = '请上传图片'
  imgFile.value.url = ''
  form.value.pointDO.icon = ''
  form.value.collectDO.content.collectStyle = '气泡聚合'
}
// 选择色值
const selectColor = (colorItem: any) => {
  form.value.heatmapDO.config.color = colorItem
  showColorList.value = false
}

const getAllLayerData = async () => {
  const data = await queryAllLayer()
  layerData.value = []
  const res = data
  const dataList: any = DealData(
    res,
    (item: any) => {
      item.name = item.elementName
      item.layerAddShow = false
      item.showItem = item.id === layerParentSelected.value.id
    },
    'pid',
    'elementId'
  )
  dataList.forEach((item: any) => {
    if (item.children) {
      item.children.forEach((sitem: any) => {
        sitem.layerEditShow = false
        sitem.layerChildShow = false
      })
    }
  })
  layerData.value.push(...dataList)
  originalLayerData = deepClone(dataList, [])
}
// 通过id查询图层详情
const getDetailInfo = async (id: string) => {
  const data = await queryInfoById(id)
  if (data.apiDO === null) {
    data.apiDO = {
      name: ''
    } as any
  }
  apiInListEcho(data)
  imgFile.value.url = ''
  imgFile.value.name = ''
  if (data.apiOutList === null || data.apiOutList.length === 0) {
    data.apiOutList = [
      {
        fieldCh: '',
        fieldEn: '',
        enabled: 0,
        deleted: 0
      }
    ] as any
  }
  if (data.pointDO === null) {
    data.pointDO = {
      enabled: 0
    } as any
  } else {
    if (data.pointDO.icon != null) {
      imgFile.value.url = data.pointDO.icon
      const strs = data.pointDO.icon.split('/')
      imgFile.value.name = strs[strs.length - 1]
    }
  }
  if (data.collectDO === null) {
    data.collectDO = {
      content: {
        collectStyle: '气泡聚合',
        collectRange: 100,
        collectLabelPosition: 'below-center'
      } as any,
      enabled: 0
    } as any
  } else {
    // const tempConfig = JSON.parse(data.collectDO.content)
    data.collectDO.content = JSON.parse(data.collectDO.content) as any
  }
  if (data.heatmapDO === null) {
    data.heatmapDO = {
      config: {
        isSupportTimeLine: true,
        color: ['#00939c', '#5dbabf', '#bae1e2', '#f8c0aa', '#dd7755', '#c22e00'],
        heatAccordance: ''
      } as any,
      enabled: 0
    } as any
  } else {
    if (data.heatmapDO.config === null) {
      data.heatmapDO = {
        config: {
          isSupportTimeLine: true,
          color: ['#00939c', '#5dbabf', '#bae1e2', '#f8c0aa', '#dd7755', '#c22e00'],
          heatAccordance: ''
        } as any,
        enabled: 0
      } as any
    } else {
      data.heatmapDO.config = JSON.parse(data.heatmapDO.config) as any
    }
  }
  form.value = data
}
// 重新填充入参的回显数据
const apiInListEcho = (data: any) => {
  if (data.apiInList === null || data.apiInList.length === 0) {
    data.apiInList = [] as any
  } else {
    apiInListTemp.value = [] as any
    data.apiInList.forEach((item: any) => {
      const tempItem = {} as any
      // 固定值
      if (item.fieldType === '0') {
        tempItem.fixedValue = item.param2
      } else if (item.fieldType === '1') {
        tempItem.timeType = item.param1
        // 时效性
        if (tempItem.timeType === '0') {
          // 小时
          tempItem.hour = item.param2
        } else if (tempItem.timeType === '1') {
          // 天
          tempItem.day = item.param2
        } else if (tempItem.timeType === '2') {
          // 具体时间
          tempItem.fixedTime = item.param2
        }
      } else if (item.fieldType === '2') {
        tempItem.subType = item.param1
      }
      tempItem.field = item.field
      tempItem.fieldType = item.fieldType
      tempItem.deleted = item.deleted
      apiInListTemp.value.push(tempItem)
    })
  }
}
onMounted(() => {
  getAllLayerData()
})
const startIndex = ref(0)
const lastIndex = ref(0)
// 监听出参参数类型
watch(
  () => form.value.apiOutList,
  () => {
    if (form.value.apiOutList instanceof Array) {
      timeAccordanceOptions.value = form.value.apiOutList.filter(
        (item: any) => (item.fieldType != null && item.fieldType === '3' && item.fieldCh)

      )
      statisticAccordanceOptions.value = form.value.apiOutList.filter(
        (item: any) => item.enabled === 0
      )
      for (let i = 0; i < form.value.apiOutList.length; i++) {
        const item = form.value.apiOutList[i]
        if (!item.deleted || item.deleted !== 1) {
          startIndex.value = i
          break
        }
      }
      for (let i = form.value.apiOutList.length - 1; i > -1; i--) {
        const item = form.value.apiOutList[i]
        if (!item.deleted || item.deleted !== 1) {
          lastIndex.value++
          break
        }
      }
    }
  },
  {
    deep: true
  }
)

// 搜索数据
watch(searchKey, () => {
  // 如果搜索为空则显示正常状态
  layerData.value = deepClone(originalLayerData, [])
  if (searchKey.value !== '') {
    layerData.value = layerData.value.filter((item:any) => {
      let isContains = false
      if (item.children && item.children.length > 0) {
        item.children = item.children.filter((subItem:any) => {
          if (!isContains) {
            isContains = (subItem.name as String).includes(searchKey.value)
          }
          return (subItem.name as String).includes(searchKey.value)
        })
      }
      item.showItem = isContains
      return isContains
    })
  }
})
</script>
<style lang="scss" scoped>
.config-home {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  background: #f4f4f4;
  padding: 10px;

  .summarize {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: #ffffff;
    margin-left: 6px;

    .search {
      height: 60px;
      display: flex;
      padding: 10px 18px 22px;
      align-items: center;
      box-sizing: border-box;

      .input-add {
        width: 24px;
        height: 24px;
        margin-left: 10px;
      }
    }

    .item-parent {
      width: auto;
      display: flex;
      flex-direction: column;

      .selected {
        box-shadow: 0 0 2px #409eff;
      }

      .unselected {
        box-shadow: 0 0 2px #dcdfe6;
      }

      .item_title {
        display: flex;
        height: 60px;
        align-items: center;
        margin: 2px;
        position: relative;

        .mask{
        position: absolute;
        width: 100%;
        height: 100%;
      }
        .item-label {
          width: 2px;
          height: 100%;
          border-radius: 0px 3px 3px 0px;
          background: #409eff;
        }

        .space {
          width: 60px;
        }

        .icon {
          width: 16px;
          height: 16px;
          z-index: 2;
        }

        .add {
          margin-left: auto;
          margin-right: 10px;
        }

        .delete,
        .edit {
          margin-right: 10px;
        }

        .item-caret-down {
          margin-right: 22px;
        }

        .item-caret-up {
          margin-right: 22px;
          transform: rotate(-180deg);
        }

        .name {
          font-size: 12px;
          font-weight: bold;
          line-height: 21px;
          color: #666666;
          margin-left: 35px;
        }
      }
    }

    .sub-item:hover {
      background: #edf4fb;
    }

    .sub-item-selected{
      background: #edf4fb;
    }
    .sub-item-normal{
      background: none;
    }
    .sub-item {
      height: 60px;
      display: flex;
      align-items: center;
      position: relative;

      .sub-item-label {
        width: 2px;
        height: 18px;
        border-radius: 0px 3px 3px 0px;
        background: #409eff;
        margin-left: 42px;
      }

      .sub-item-name {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        /* 纯白 */
        color: #666666;
        margin-left: 26px;
      }
      .delete {
        width: 16px;
        height: 16px;
        margin-left: auto;
        margin-right: 10px;
        cursor: pointer;
      }
      .edit {
        width: 16px;
        height: 16px;
        margin-right: 24px;
        cursor: pointer;
      }
    }
  }

  .form {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    background: #f4f4f4;
  }
  .operation {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: #ffffff;
    margin-left: 6px;
    flex: 1;
    padding: 16px 22px;

    .title {
      font-size: 14px;
      font-weight: bold;
      line-height: 18px;
      letter-spacing: 0px;
      color: #444444;
    }

    .divider {
      height: 1px;
      margin-top: 12px;
      background: #dcdfe6;
    }

    .sub-title {
      font-size: 12px;
      color: #666666;
      margin-top: 10px;
    }

    .sub-title-child {
      display: flex;
      font-size: 12px;
      font-weight: bold;
      color: #666666;
      margin-top: 12px;
      align-items: center;

      .presuffix {
        width: 4px;
        height: 19px;
        border-radius: 0px 2px 2px 0px;
        background: #409eff;
        margin-right: 12px;
      }
    }

    .permission {
      display: flex;

      .item {
        font-size: 12px;
        color: #666666;
        margin-top: 10px;
        margin-right: 50px;
        display: flex;
        flex-direction: column;
      }
    }

    .option {
      display: flex;
      font-size: 12px;
      color: #666666;
      align-items: center;
      margin-right: 12px;
      white-space: nowrap;

      .check {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }

    .params {
      width: 100%;
      border-collapse: collapse;
      margin-top: 8px;

      .type th {
        height: 48px;
        border: 1px solid #dcdfe6;
        font-size: 12px;
        font-weight: bold;
        line-height: 48px;
        color: #666666;
        background: #f3f3f3;
      }

      .content td {
        height: 48px;
        border: 1px solid #dcdfe6;
        font-size: 12px;
        font-weight: bold;
        line-height: 48px;
        color: #666666;
        text-align: center;
      }

      .input-key {
        width: 180px;
        margin: auto;
        display: flex;
        align-items: center;
      }

      .input-time {
        width: 140px;
        margin: auto 10px;
      }

      .associate {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .operate-icon {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }

    .enable-container {
      display: flex;
      font-size: 12px;
      color: #666666;
      margin-top: 10px;
      align-items: center;
    }

    .upload {
      display: flex;
      flex-direction: column;
      padding: 18px 16px;
      background: #f5f7fa;
      font-size: 12px;
      color: #666666;

      .pit {
        display: flex;
        align-items: center;
        margin-top: 10px;

        .pit-text {
          width: 240px;
          height: 32px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 0.9);
          border: 1px solid #dcdcdc;
          padding: 0 10px;
          .img-name{
            flex: 1;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
          }
          .cancel-upload {
            width: 14px;
            height: 14px;
            margin-left: auto;
            margin-right: 5px;
          }

          .confirm-upload {
            width: 14px;
            height: 14px;
            margin-right: 10px;
          }
        }

        .pit-icon {
          width: 44px;
          height: 32px;
          border-radius: 3px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #dcdcdc;
          margin: 0 25px;
          box-sizing: border-box;
        }
      }
    }

    .gather {
      display: flex;
      padding: 18px 16px;
      background: #f5f7fa;
      flex-wrap: wrap;

      .select {
        width: 100%;
        display: flex;

        .more {
          width: 12px;
          height: 12px;
          margin-left: auto;
          box-sizing: border-box;
          transform: rotate(-90deg);
        }
      }

      .select-color {
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        background: #ffffff;
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 10px;
      }

      .color-item {
        width: 16.6%;
        height: 100%;
      }

      .color-list {
        display: flex;
        flex-direction: column;

        .list-item {
          width: 100%;
          height: 32px;
          display: flex;
          align-items: center;
          background: #ffffff;
          padding: 10px;
          box-sizing: border-box;
        }

        .list-item:hover {
          width: 100%;
          height: 32px;
          display: flex;
          align-items: center;
          background: #e7e7e7;
          padding: 10px;
          box-sizing: border-box;
        }
      }
    }

    .child-group {
      font-size: 12px;
      color: #666666;
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      width: 25%;
      padding-right: 40px;
      box-sizing: border-box;
    }

    .register {
      display: flex;
      margin-top: 24px;
    }

    .child {
      width: 25%;
      padding-right: 40px;
      box-sizing: border-box;
      font-size: 12px;
      color: #666666;
      margin-top: 8px;
      display: flex;
      flex-direction: column;
    }

    .commit {
      display: flex;
      justify-content: center;
      margin: 24px auto 20px auto;

      .cancel {
        width: 112px;
        height: 32px;
        color: #000000;
        text-align: center;
        background: #e7e7e7;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        cursor: pointer;
      }

      .confirm {
        width: 112px;
        height: 32px;
        color: #ffffff;
        border-radius: 3px;
        background: #409eff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
  .dialog{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #fff;
    .title{
      display: flex;
      background: #fff;
      color: #666666;
      font-size: 18px;
      margin-left: 10px;
    }
    .content{
      display: flex;
      color: #666666;
      font-size: 18px;
      margin-top: 10px;
      .right{
        display: flex;
        flex-direction: column;
        .sub-content{
          color: #999999;
          font-size: 14px;
          margin-top: 5px;
        }
      }
    }
    .divider{
      width: 100%;
      height: 1px;
      background: #E4E4E4;
      margin: 20px 0 15px 0;
    }
    .dialog-footer{
      display: flex;
      .confirm{
        width: 60px;
        color: #fff;
        font-size: 12px;
        background: #0079FE;
        text-align: center;
        margin-left: auto;
        padding: 6px;
        border-radius: 5px;
        cursor: pointer;
      }
      .cancel{
        width: 60px;
        color: #0079FE;
        font-size: 12px;
        border: 1px solid #0079FE;
        margin-left: 10px;
        text-align: center;
        margin-right: 10px;
        padding: 6px;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
  // --------------------------------------- 以下是对elementPlus的样式修改//
  //输入框样式修改
  &:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #dcdfe6;
    box-shadow: 0 0 0 1px #dcdfe6 inset;
  }
  &:deep(.el-input, .el-textarea) {
    --el-input-bg-color: transparent;
    --el-input-border-color: #dcdfe6;

    .el-input__inner {
      color: #666666;
    }
  }

  &:deep(.el-textarea) {
    --el-input-bg-color: transparent;
    --el-input-border-color: #dcdfe6;

    .el-textarea__inner {
      color: #666666;
    }
  }

  //单选框样式修改
  &:deep(.el-radio) {
    color: #666666;
    margin-right: 12px;

    .el-radio__inner {
      border: 1px solid #dcdcdc;
    }

    .el-radio.el-radio--large .el-radio__label {
      font-size: 12px;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #666666;
    }

    .el-radio__inner::after {
      width: 8px;
      height: 8px;
      background-color: #409eff;
    }

    .el-radio__input.is-checked .el-radio__inner {
      border-color: #409eff;
      background: white;
    }
  }

  //el-select
  &:deep(.el-select__popper) {
    background: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);

    .el-popper__arrow::before {
      background: #fff;
      border: none;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: #f5f7fa;
    }

    .el-select-dropdown__item {
      color: #606266;
    }
  }

  //时间选择
  &:deep(.el-picker__popper) {
    background: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);

    .el-popper__arrow::before {
      background: #fff;
      border: none;
    }
    .el-picker-panel {
      color: #606266;
      background: #ffffff;
    }

    .el-date-picker__time-header {
      border-bottom: 1px solid #e4e7ed;
    }

    .el-picker-panel__footer {
      border-top: 1px solid #e4e7ed;
      background-color: #ffffff;
    }

    .el-button {
      color: #606266;
      background-color: #ffffff;
      border-color: #dcdfe6;
    }

    .el-date-picker__header-label {
      color: #606266;
    }

    .el-date-table th {
      color: #606266;
    }

    .el-picker-panel .el-time-panel {
      background: #ffffff;
      border: 1px solid #ffffff;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
    }

    .el-time-spinner__item {
      color: #606266;
    }

    .el-time-panel__btn {
      color: #301133;
    }

    .el-time-panel__btn.confirm {
      color: #409eff;
    }

    .el-time-panel__footer {
      border-top: #e4e7ed;
    }
  }
  &:deep(.el-dialog) {
    --el-dialog-bg-color: #fff;
    background: #fff;
    box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
      0px 8px 20px rgba(0, 0, 0, 0.08);
    .el-dialog__body {
      color: #606266;
    }

    .el-dialog__title {
      color: #303133;
    }
  }
  .switch {
    --el-switch-on-color: #13ce66;
    --el-switch-off-color: #dcdfe6;
  }
}
</style>
